<template>
  <div class="index-container">
    <el-page-header
      class="detailheader"
      content="管理 / 报表下载"
      :icon="ArrowLeft"
      @back="goBack"
    />
    <el-row class="panel">
      <el-col
        :lg="{ span: 18, offset: 3 }"
        :sm="{ span: 20, offset: 2 }"
        :xs="{ span: 22, offset: 1 }"
      >
        <el-button :icon="Plus" plain type="primary" @click="handleEdit">
          生成月报
        </el-button>
      </el-col>
    </el-row>
    <el-row
      v-infinite-scroll="() => fetchData()"
      class="page-list"
      infinite-scroll-immediate="false"
      style="overflow: auto"
    >
      <el-col
        :lg="{ span: 18, offset: 3 }"
        :sm="{ span: 20, offset: 2 }"
        :xs="{ span: 22, offset: 1 }"
      >
        <el-table v-loading="listLoading" class="listtable" :data="list">
          <el-table-column label="报表名称" prop="title" />
          <el-table-column label="创建时间" prop="createtime">
            <template #default="{ row }">
              {{ formatTime(row.createtime) }}
            </template>
          </el-table-column>
          <el-table-column align="right" label="下载操作" prop="id">
            <template #default="{ row }">
              <el-dropdown
                split-button
                @click="
                  () => {
                    if (row.status == 4) handleDown(row)
                  }
                "
                @command="(c) => handleCommand(c, row)"
              >
                {{ row.status < 4 ? '处理中...' : '下载' }}
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item command="a">重新生成</el-dropdown-item>
                    <el-dropdown-item command="b">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import router from '@/router'
  import { useUserStore } from '@/store/modules/user'
  import { getReport, reCreateReport, deleteReport } from '@/api/dksb'
  import { formatTime } from '@/utils'
  import { ArrowLeft, Plus } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'ReportList',
    components: {
      Edit: defineAsyncComponent(() => import('./components/ReportEdit')),
    },
    setup() {
      const route = useRoute()
      const userStore = useUserStore()
      // const { corpId, userId } = storeToRefs(userStore)
      const { corpId, userId } = userStore
      console.log(userId)
      console.log(route)
      console.log(reCreateReport)
      console.log(deleteReport)
      const reportStatus = [
        '待报表生成',
        '待报表传',
        '待转译',
        '待下载链生成',
        '完成',
      ]

      const state = reactive({
        editRef: null,
        list: [],
        total: 0,
        listLoading: true,
        downloadLoading: false,
        reportForm: {
          corpId,
          userid: userId,
          type: null,
          status: null,
          offset: 0,
          pageSize: 20, //0表示没有分页，输出所有数据
        },
      })

      const fetchData = async (refresh = false) => {
        if (refresh) {
          state.total = 0
          state.reportForm.offset = 0
        } else {
          if (state.total > 0) return
          state.reportForm.offset = state.list.length
        }
        state.listLoading = true
        const { data: list } = await getReport(state.reportForm)
        if (refresh) {
          state.list = list
        } else {
          if (list.length < state.reportForm.pageSize) {
            state.total = state.list.length + list.length
          }
          state.list.push(...list)
        }
        state.listLoading = false
      }

      const goBack = () => {
        router.go(-1)
      }

      const handleEdit = () => {
        state.editRef.showEdit()
      }

      const handleDown = async (row) => {
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = row.url
        link.setAttribute('download', row.title + '.xlsx')
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
      }

      const handleCommand = async (command, row) => {
        if (command === 'a') {
          await reCreateReport(row.id)
        } else if (command === 'b') {
          await deleteReport([row.id])
        }
        fetchData(true)
      }

      onMounted(() => {
        fetchData(true)
      })

      return {
        ...toRefs(state),
        reportStatus,
        fetchData,
        formatTime,
        ArrowLeft,
        Plus,
        goBack,
        handleDown,
        handleCommand,
        handleEdit,
      }
    },
  })
</script>
<style lang="scss">
  html {
    height: 100%;
    body {
      margin: 0;
      height: 100%;
      #app {
        margin: 0;
        height: 100%;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .index-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .detailheader {
      height: 58px;
      line-height: 58px;
      border-bottom: 1px var(--el-border-color) var(--el-border-style);
    }
    .panel {
      margin-top: 20px;
    }
    .page-list {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      .listtable {
        margin-top: 10px;
      }
    }
  }
</style>
